<template lang="html">
	<div id="pageBox">
		<div class="headBox">
			<div class="userImg">
				<img :src="userInfo.headImg" alt="">
			</div>
			<div class="userName overflow1 pd14">
				{{userInfo.nickName}}
			</div>
		</div>
		<div class="classBox">
			<div class="classItem" @click="gotoCollect">
				<p class="itemNum">{{ userInfo.collectNum }}</p>
				<p class="itemName">收藏</p>
			</div>
			<!-- <div class="classItem middle" @click="gotoFollowPage">
				<p class="itemNum">{{ userInfo.attentionNum }}</p>
				<p class="itemName">关注</p>
			</div> -->
			<div class="classItem" @click="gotoCoupon">
				<p class="itemNum">{{ userInfo.couponNum }}</p>
				<p class="itemName">卡劵</p>
			</div>
		</div>
		<div class="mineList pd14">
			<div class="mineItem" v-for="(v,i) in mineList" @click="goTopage(v.path)">
				<div class="iconBox">
					<i class="iconfont importantColor" :class="v.icon"></i>
				</div>
				<div class="itemName">
					{{v.name}}
				</div>
				<div class="more">
					<i class="iconfont icon-rjt"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			mineList:[
				// { icon: "icon-shuji", name:"入驻静雅课堂",path:"/checkIn" },
				{ icon: "icon-jilu", name:"订单记录",path:"/orderList" },
				{ icon: "icon-jinqian", name:"推广赚钱",path:"/spread" },
				{ icon: "icon-wenti", name:"常见问题解答",path:"/QA" },
				{ icon: "icon-kefu", name:"联系客服",path:"/contactUs" }
			],
			userInfo: {}
		}
	},
	mounted() {
		this.userInfo = this.$store.state.userInfo.nickName && this.$store.state.userInfo || JSON.parse(localStorage.getItem('userInfo'))
		console.log(this.userInfo)
	},
	methods:{
		goTopage(obj){
			this.$router.push(obj);
		},
		gotoCollect(){
			let obj = {
				path:"/collection"
			}
			this.goTopage(obj)
		},
		gotoFollowPage(){
			let obj = {
				path:"/followPage"
			}
			this.goTopage(obj)
		},
		gotoCoupon(){
			let obj = {
				path:"/coupon"
			}
			this.goTopage(obj)
		},
	}
}
</script>

<style lang="less" scoped>
	#pageBox{
		.headBox{
			text-align: center;
			padding:20px 0 10px;
			.userImg{
				width:1rem;
				height:1rem;
				margin:0 auto;
				border-radius: 50%;
				img{
					width:100%;
					height: 100%;
					border-radius: 50%;
					object-fit: cover;
				}
			}
			.userName{
				font-weight: bold;
				font-size:0.2rem;
				margin:10px 0;
			}
		}
		.classBox{
			display: flex;
			.classItem{
				flex:1;
				text-align:center;
				.itemNum{
					font-weight: 500;
					font-size:0.22rem;
					line-height: 0.28rem;
				}
				.itemName{
					color:#999;
					font-size:0.12rem;
					line-height: 0.28rem;
				}
				&.middle{
					position:relative;
					&:before,&:after{
						content:"";
						position:absolute;
						width:1px;
						height:20px;
						background:#dedede;
						top:50%;
						margin-top:-10px;
					}
					&:before{
						left:0;
					}
					&:after{
						right:0;
					}
				}
			}
		}
		.mineList{
			margin-top:20px;
			.mineItem{
				padding:0 0.4rem;
				border-bottom:1px solid #dedede;
				line-height: 0.6rem;
				position:relative;
				.iconBox{
					position:absolute;
					top:0;
					left:0;
					width:0.4rem;
					height:0.6rem;
					line-height: 0.6rem;
					text-align: left;
					i{
						font-size:0.24rem;
						font-weight: bold;
					}
				}
				.itemName{
					font-size:0.16rem;
					font-weight: 400;
				}
				.more{
					position:absolute;
					width:0.2rem;
					height:0.6rem;
					right:0;
					bottom:0;
					text-align: center;
					i{
						font-size:0.26rem;
						color:#999;
					}
				}
			}
		}
	}
</style>
